<!-- 文档信息/附件 决算模块 -->
<template>
    <view class="contenier">
        <!-- 搜索附件 -->
        <view class="search">
            <view class="first-search">
                <u-search :bgColor="'#fff'" :borderColor="'#ccc'" :clearabled="true" placeholder="请输入附件名称"
                    v-model="searchValue" :showAction="false" :height="88"></u-search>
            </view>
            <u-icon name="list-dot" color="#909399" size="68" @click="clcikPop(true)"></u-icon>
        </view>
        <!-- 右侧搜索组件 -->
        <view>
            <u-popup ref="dialogConfirmRef" v-model="popShow" mode="right" width="85%" closeable :maskCloseAble="false">
                <view class="pop-box">
                    <view :style="{ width: '100%' }">
                        <view class="title">查询条件</view>
                        <u-form :model="searchobj" label-width="180">
                            <u-form-item :label="item.label" v-for="(item, index) in searchOption" :key="index">
                                <u-select v-if="item.type === 'select'" v-model="item.showSelect" :mode="orgMode"
                                    :list="orgList[item.value]" @confirm="getOrg(item, $event)"></u-select>
                                <u-input v-model="searchobj[item.value]" border :type="item.type"
                                    @click="() => { item.showSelect = true }" />
                            </u-form-item>
                        </u-form>
                    </view>
                    <view class="btns">
                        <button class="pms-btn" plain="true" @click="clear">重置</button>
                        <button class="pms-btn plain" plain="false" @click="doSearch()">
                            查询
                        </button>
                    </view>
                </view>
            </u-popup>
        </view>
        <!-- 附件信息 -->
        <AttachMentInfo :attachMentObj="paramsObj" ref="ZrAttachMentInfo" />
    </view>
</template>

<script>
import AttachMentInfo from "@/inspur/attachmentinfo/index"
export default {
    name: "AttachMentinfo",
    components: {
        AttachMentInfo
    },
    props: {
        // 参数
        attachMentObj: {
            type: Object,
            default: () => ({
                // sysToken: 'c64dd4dac160904f76a09c81b078228a',
                // prjStage: 'Q',
                // prjId: '9297033',
                // nodeId: 'ss01_shi',
                // prjType: 'M',
                // roomType: '0',
                // towerType: '0',
                // buildModes: '01',
                // activityId: 'sett_01',
                // isChange: '0',
                // type: 'todo'
            })
        }
    },
    data() {
        return {
            paramsObj: {},//参数
            searchValue: "",//顶部搜索
            popShow: false,//搜索弹窗
            //表单配置
            searchOption: [
                {
                    label: "文件名称",
                    value: 'docName',
                    type: 'input'
                },
                {
                    label: "项目阶段",
                    value: 'prjStage',
                    type: 'select',
                    showSelect: false
                },
                {
                    label: "项目节点",
                    value: 'prjNodeId',
                    type: 'select',
                    showSelect: false
                },
                {
                    label: "文件类型",
                    value: 'fileType',
                    type: 'input',
                    showSelect: false
                },
                {
                    label: "文件上传人",
                    value: 'fileUplink',
                    type: 'input',
                    showSelect: false
                },
                {
                    label: "文件获取方式",
                    value: 'fileGetWay',
                    type: 'select',
                    showSelect: false
                }
            ],
            // 表单搜索内容
            searchobj: {
                docName: "",
                fileType: "",
                fileGetWay: "",
                fileUplink: "",
                prjNodeId: "",
                prjStage: "",
            },
            // 发送搜索的参数
            searchParams: {

            },
            // 下拉框数据
            orgList: {
                // 项目阶段
                prjStage: [
                ],
                // 项目节点
                prjNodeId: [],
                // 文件获取方式
                fileGetWay: [
                    {
                        label: '手动上传',
                        value: '0'
                    },
                    {
                        label: '系统生成',
                        value: '1'
                    },
                    {
                        label: '系统生成/手动编辑',
                        value: '2'
                    }
                ],
            },
            orgMode: "mutil-column-auto",
        }
    },
    watch: {
        searchValue(newval, oldval) {
            this.searchSendParams({ "docName": newval })
        },
    },
    methods: {
        // 确认选择
        getOrg(item, e) {
            this.searchobj[item.value] = e[0].label
            this.searchParams[item.value] = e[0].value
            // 项目阶段才会调用
            if (item.value === "prjStage") {
                this.getPrjNodeName(e[0].value)
            }
        },
        // 打开/关闭弹框
        clcikPop(show) {
            this.popShow = show
            this.clear()
        },
        // 搜索
        doSearch() {
            const queryParams = {
                docName: this.searchobj.docName,
                fileType: this.searchobj.fileType,
                fileUplink: this.searchobj.fileUplink,
                prjStage: this.searchParams.prjStage ? this.searchParams.prjStage : '',
                prjNodeId: this.searchParams.prjNodeId ? this.searchParams.prjNodeId : '',
                fileGetWay: this.searchParams.fileGetWay ? this.searchParams.fileGetWay : '',
            }
            this.searchSendParams(queryParams)
            this.clcikPop(false)
        },
        // 清空重置
        clear() {
            Object.keys(this.searchobj).forEach(key => {
                this.searchobj[key] = ""; // 保持响应性
            });
            Object.keys(this.searchParams).forEach(key => {
                this.searchParams[key] = ""; // 保持响应性
            });
        },
        // 侧边栏搜索
        searchSendParams(data) {
            this.$refs.ZrAttachMentInfo.getInitFileList(data)
        },
        checkSelect(index) {
            this.searchOption[index].expanted = !this.searchOption[index].expanted
        },
        // 初始化给表单添加一个属性
        initSelectOption() {
            this.searchOption = this.searchOption.map(item => {
                return {
                    ...item,
                    expanted: false
                }
            })
        },
        // 获取项目阶段字典
        async getPrjStage() {
            const res = await this.$axios.get('/attachment/api/attachment/file/getPrjStage')
            if (+res.code === 200) {
                this.orgList.prjStage = res.data.map(item => ({
                    value: item.key,
                    label: item.value
                }))
            }

        },
        // 选择项目阶段后调用项目节点
        async getPrjNodeName(val) {
            if (!val) {
                return
            }
            this.searchobj.prjNodeId = ''
            // 清空节点
            this.orgList.prjNodeId.splice(0, this.orgList.prjNodeId.length)
            const res = await this.$axios.post("/attachment/api/attachment/file/getNodeInfo", { prjId: this.paramsObj.prjId, prjStage: val ?? '' })
            if (res.data && res.data.length > 1) {
                this.orgList.prjNodeId = res.data.map(item => ({
                    value: item.dictId,
                    label: item.dictName,
                    busiId: item.busiId
                }))
            } else {
                uni.showModal({
                    title: '温馨提示',
                    content: "此项目阶段下项目节点为空",
                    showCancel: false,
                    confirmColor: '#eb4b4b',
                });
            }
        },
    },
    created() {
        this.paramsObj = this.attachMentObj
        console.log(this.paramsObj, "文档信息页面初始化props接收参数=>");
        uni.setStorageSync("sysToken", this.paramsObj.sysToken)
        this.getPrjStage()
        this.initSelectOption()
    },
}

</script>
<style>
@import "@/common/uView.css";
</style>
<style scoped lang='scss'>
.contenier {
    // width: calc(100% - 20rpx);
    margin: auto;
    padding: 20rpx;

    .search {
        display: flex;
        justify-content: center;

        .first-search {
            width: 93%;
            margin-right: 20rpx;
        }

    }
}

.pop-box {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.pms-btn {
    height: 60rpx;
    width: 190rpx;
    line-height: 60rpx;
    border-radius: 60rpx;
    color: #ca171d;
    border-color: #ca171d;
    margin: 20rpx;

    &.plain {
        color: #fff;
        background: #ca171d;
    }
}

.btns {
    display: flex;
}

.search {
    //   margin: 16rpx 0;
    font-size: 24rpx;
    padding: 16rpx;
}

.search-box {
    margin-top: 10rpx;
    position: relative;
}

.input-query {
    width: 100%;
    height: 90rpx;
    padding-left: 72rpx;
    box-sizing: border-box;
    border-radius: 80rpx;
    background: #fff;
    font-size: 24rpx;
}

.search-input {
    position: relative;
    display: flex;
}

.search-icon {
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(50% - 24rpx);
    left: calc(30rpx);
    width: 48rpx;
    height: 48rpx;
}

.search-icon-son {
    font-size: 40rpx;
}

.query-icon {
    width: 60rpx;
    height: 80rpx;
    font-size: 60rpx;
    text-align: center;
    margin-left: 20rpx;
}

.pms-icon {
    color: #333;
}

.title {
    font-weight: bold;
    font-size: 32rpx;
    line-height: 44rpx;
    padding: 12rpx 0 24rpx 0;
}

.scroll-Y {
    height: calc(100% - 132rpx);
    // margin-bottom: 170rpx;
    position: relative;

    .loading {
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 240rpx;
        background: rgba(17, 17, 17, 0.7);
        text-align: center;
        border-radius: 5px;
        color: #fff;
        padding: 30rpx;
    }
}

.disabled-select {
    pointer-events: none;
    background: rgba(220, 223, 230, 0.3);
}
</style>